<html>

<head>
  <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>04-加载百度地图</title>
  <script src="../../../assets/ol/v5.3.0/ol.js"></script>
  <script src="../../../assets/script/jquery-2.1.1.min.js"></script>
  <link rel="stylesheet" href="../../../assets/ol/v5.3.0/ol.css">
  <link rel="stylesheet" href="../../../assets/css/index.css">
  <style>
    #map {
      width: 80%;
      height: 800px;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script src="../../../assets/script/v5.3.0-common.js"></script>
</body>
<script>
  // 分辨率数组
  const resolutions = []
  for (let i = 0; i < 19; i++) {
    resolutions[i] = Math.pow(2, 18 - i);
  }
  const tileGrid = new ol.tilegrid.TileGrid({
    origin: [0, 0],
    resolutions: resolutions
  })
  const baiduSource = new ol.source.TileImage({
    projection: projection, // 地图投影坐标系
    tileGrid: tileGrid, // 切片网格
    // 瓦片请求方式 拼接瓦片地图URL，{x}{y}{z}对应瓦片行列号和级数。
    tileUrlFunction: function (tileCoord, pixelRatio, proj) {
      if (!tileCoord) {
        return ""
      }
      const z = tileCoord[0]
      let x = tileCoord[1]
      let y = tileCoord[2]
      if (x < 0) {
        x = "M" + (-x)
      }
      if (y < 0) {
        y = "M" + (-y)
      }
      return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
    }
  })
  const baiduLayer = new ol.layer.Tile({
    source: baiduSource
  })
  map.addLayer(baiduLayer) 
</script>

</html>